<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>BOSS直聘-互联网招聘神器！</title>
    <!-- 通过link标签来引用css文件夹中的style.css样式文件 -->
    <link rel="stylesheet" href="css/main.css">
    <link rel="shortcut icon" type="image/x-icon" href="img/favicon.png">
</head>
<!-- 调整代码格式  alt+shift+f -->

<body>
    <div class="container" id="app">
        <!-- 头部 header -->
        <div class="home-header">
            <!-- 背景图上的文字 -->
            <img src="img/home-search-text.png" alt="">
            <!-- 表单 -->
            <form action="">
                <input type="text" placeholder="搜索职位或者是公司">
                <button type="submit">搜索</button>
            </form>
        </div>

        <!-- 分类信息 categories -->
        <div class="home-catagories">
            <!-- 自定义列表 -->
            <!-- item可以被其他替换，如aaa，vnd，dddd，但是in后要与data中数组名称相同 -->
            <dl v-for="item in categories">
                <dt>
                <!-- 属性绑定 -->
                <img :src=item.icon alt="">
                <!-- 模板展示 -->
                <div>{{item.name}}</div>
            </dt>
                <!-- item是categories数组内的数组元素，item只是一个名字，名字任意取。我需要让数组进行遍历
                item.name的意思是在categories数组内的name数组中的内容一一展示 另外，由于本html采用了VUE.JS
                的开源数据导致网页上的显示需要依赖网速，网速过慢时可能只会显示{{item.name}}-->
                <dd>
                    <!-- v-for相当于在eclipse里面的for循环，tag是被替换的元素，item.tags是数组中的待替换元素
                最后唯一被不断改变的只有tag这一元素，但是需要在外面加上双花括号  {{  }}   -->
                    <a href="" class="tag" v-for="tag in item.tags">{{tag}}</a>

                </dd>
            </dl>
        </div>


        <!-- 页脚 footer-->
        <div class="home-footer">
            <p>违法和不良信息举报邮箱：jubao@kanzhun.com</p>
            <p>企业服务热线和举报投诉：400 065 5799</p>
        </div>


    </div>


    <!-- <div id="app-3">
        <p v-if="seen">现在你看到我了</p>
      </div> -->

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
    <!-- <script src="https://cdn.bootcss.com/fetch/3.0.0/fetch.min.js"></script> -->
    <script>
        // fetch的库可以提高浏览器的兼容性  ie是不支持fetch这个函数的
        // 创建一个vue的实例 
        const vm = new Vue({
            //   指定vue的这个实例要绑定到那个元素上面
            el: '#app',
            //   表示数据
            data: {
                //  message表示数据的名字 
                // hello vue表示名字所对应的项
                categories: []
            },
            // 当页面加载被加载的时候会调用一个函数来获取json数据
            created: function() {
                // 如果仍然需要在网页上添加内容，就可以将这个位置的数组扩大，网页上的内容也会随之增多。
                // 扩大的内容仍为icon。name。tag数组
                fetch('http://127.0.0.1:5500/api/index.json')
                    .then(function(res) {
                        // <!-- 可以利用res来请求json数据 -->
                        return res.json();
                    }).then(function(data) {
                        // <!-- 第二个then才是真正得到的数据data -->
                        // <!-- 利用console.log(data);测试在控制台输出数据 -->
                        console.log(data);
                        // 将得到的数据赋值给categories数组
                        vm.categories = data;

                    })
            }


        })
    </script>
</body>

</html>